<template>
  <el-container id="app">
    <el-header style="background-color: rgba(0, 191, 255, 1 );line-height: 60px;">
      <el-row style="height:60px">
        <el-col :span="12" style="height:60px;">
          <div class="title">
            <h2><i class="el-icon-goods"></i>BlindBoxTesco·盲盒在线交易·一个更加方便的平台</h2>
          </div>
        </el-col>
        <el-col :span="12" style="height:60px;">
          <div style="text-align: right;width: auto;margin-right:50px">
            <el-popover
              placement="bottom"
              width="150"
              trigger="hover"
              v-if="userInfo.username != ''">
              <div style="text-align: center;display: flex;  flex-direction: column;">
                <el-link @click="toHomeAdmin()" style="margin-top:5px" v-if="userInfo.roleId == 0">前往后台</el-link>
                <el-link @click="dialogUserInfo = true" style="margin-top:5px;">修改用户信息</el-link>
                <el-link @click="dialogPassword = true" style="margin-top:5px">修改密码</el-link>
                <el-link @click="loginOut()" style="margin-top:5px">退出登陆</el-link>
              </div>
              <el-link style="height: 20px;color:white;" slot="reference">{{userInfo.username}}</el-link>
            </el-popover>
            <el-link style="height: 20px;color:white;" @click="toRegister()" v-else>登录/注册</el-link>
          </div>
        </el-col>
      </el-row>
      <!-- 修改用户信息 -->
      <el-dialog title="我的信息" :visible.sync="dialogUserInfo">
        <el-form ref="userInfo" :model="userInfo" :rules="userInfoRules">
          <el-form-item label="用户名" prop="username" style="font-weight: bolder;">
            <el-input v-model="userInfo.username" placeholder="请输入您的用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" style="font-weight: bolder;"> 
            <el-input type="password" v-model="userInfo.password" placeholder="请输入您的密码" disabled></el-input>
          </el-form-item>
          <el-form-item label="性别" style="font-weight: bolder;">
            <el-radio-group v-model="userInfo.gender">
              <el-radio label="男" style="font-weight: bolder;"></el-radio>
              <el-radio label="女" style="font-weight: bolder;"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机号码" prop="phoneNumber" style="font-weight: bolder;">
            <el-input v-model="userInfo.phoneNumber" placeholder="请输入您的手机号码"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('userInfo')">重置</el-button>
          <el-button type="primary" @click="modifyUserInfo('userInfo')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改密码 -->
      <el-dialog title="修改密码" :visible.sync="dialogPassword">
        <el-form ref="userInfo" :model="userInfo" :rules="userInfoRules">
          <el-form-item label="密码" prop="oldPassword" style="font-weight: bolder;"> 
            <el-input type="password" v-model="userInfo.oldPassword" placeholder="请输入您的旧密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="newPassword" style="font-weight: bolder;"> 
            <el-input type="password" v-model="userInfo.newPassword" placeholder="请输入您的新密码" show-password></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('userInfo')">重置</el-button>
          <el-button type="primary" @click="modifyUserPassword('userInfo')">确 定</el-button>
        </div>
      </el-dialog>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse == false ? '214px'  : '78px'" :class="isCollapse == false ? 'menu_open' : 'menu_close' ">
        <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" style="margin-left:6px;margin-top:10px;" unique-opened active-text-color="#ffd04b" @select="open">
          <div>
            <el-button @click="changeMenuCss()" style="border: hidden;background-color:black;color:white; margin-top:2px;margin-bottom:2px;"> | | | </el-button>
          </div>
          <el-submenu index="1-1">
            <template slot="title">
              <div style="border-bottom: 2px solid black;">
                <i class="el-icon-shopping-bag-1"></i>
                <span slot="title">全部盲盒</span>
              </div>
            </template>
            <el-menu-item index="1-1-2">
              <!-- <i class="el-icon-warning-outline"></i> -->
              <span slot="title" style="border-bottom: 2px solid black;margin-left: 10px;">全部盲盒</span>
            </el-menu-item>
            <el-menu-item index="1-1-1">
              <!-- <i class="el-icon-warning-outline"></i> -->
              <span slot="title" style="border-bottom: 2px solid black;margin-left: 10px;">热门推荐</span>
            </el-menu-item>
            <!-- <el-submenu index="1-2"> -->
              <!-- <template slot="title"> -->
                <!-- <span style="border-bottom: 2px solid black;">玩偶</span> -->
              <!-- </template> -->
              <!-- <el-menu-item index="1-3-1">推荐盲盒</el-menu-item> -->
              <!-- <el-menu-item index="1-2-1">热门推荐</el-menu-item> -->
            <!-- </el-submenu> -->
            <!-- <el-submenu index="1-3"> -->
              <!-- <template slot="title"> -->
                <!-- <span style="border-bottom: 2px solid black;">生活用品</span> -->
              <!-- </template> -->
              <!-- <el-menu-item index="1-3-1">日常用品</el-menu-item> -->
              <!-- <el-menu-item index="1-3-2">家电家居</el-menu-item> -->
              <!-- <el-menu-item index="1-3-3">床上用品</el-menu-item> -->
              <!-- <el-menu-item index="1-3-4">厨房用具</el-menu-item> -->
            <!-- </el-submenu> -->
          </el-submenu>
          <!-- <el-submenu index="2">
            <template slot="title" style="border-bottom: 2px soild black;">
              <div style="border-bottom: 2px solid black;">
                <i class="el-icon-shopping-bag-2"></i>
                <span slot="title">全部商品</span>
              </div>
            </template>
            <el-submenu index="2-1">
              <template slot="title">
                <span style="border-bottom: 2px solid black;">玩偶</span>
              </template>
              <el-menu-item index="2-1-1">平台推荐</el-menu-item>
              <el-menu-item index="2-1-2">平台热门</el-menu-item>
            </el-submenu>
            <el-submenu index="2-2">
              <template slot="title">
                <span style="border-bottom: 2px solid black;">生活用品</span>
              </template>
              <el-menu-item index="2-2-1">日常用品</el-menu-item>
              <el-menu-item index="2-2-2">家电家居</el-menu-item>
              <el-menu-item index="2-2-3">床上用品</el-menu-item>
              <el-menu-item index="2-2-4">厨房用具</el-menu-item>
            </el-submenu>
          </el-submenu> -->
          <!-- <el-submenu index="3"> -->
            <!-- <template slot="title" style="border-bottom: 2px soild black;"> -->
              <!-- <div style="border-bottom: 2px solid black;"> -->
                <!-- <i class="el-icon-shopping-cart-full"></i> -->
                <!-- <span slot="title">我的购物车</span> -->
              <!-- </div> -->
            <!-- </template> -->
            <!-- <el-menu-item-group> -->
              <!-- <el-menu-item index="3-1-1">我的购物车</el-menu-item> -->
              <!-- <el-menu-item index="3-1-2">购物车中的商品</el-menu-item> -->
            <!-- </el-menu-item-group> -->
          <!-- </el-submenu> -->
          <el-menu-item index="3">
            <div style="border-bottom: 2px solid black;">
              <i class="el-icon-shopping-cart-full"></i>
              <span slot="title">购物车</span>
            </div>
          </el-menu-item>
          <el-submenu index="4"  v-show="role">
            <template slot="title" style="border-bottom: 2px soild black;">
              <div style="border-bottom: 2px solid black;">
                <i class="el-icon-shopping-cart-full"></i>
                <span slot="title">我的店铺</span>
              </div>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1-2">已上架的盲盒</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="4-1-3">近七天盲盒销售情况</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title" style="border-bottom: 2px soild black;">
              <div style="border-bottom: 2px solid black;">
                <i class="el-icon-user"></i>
                <span slot="title">我</span>
              </div>
            </template>
            <el-menu-item-group>
              <el-menu-item index="6-1-1">我的信息</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="6-1-2">我的钱包</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="5">
            <i class="el-icon-warning-outline"></i>
            <span slot="title">关于我们</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// @ is an alias to /src

export default {
  inject: ['reload'],
  data(){
    // 验证手机号的规则
    var checkPhoneNumber = (rule, value, cd) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[789]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return cd()
      }
      cd(new Error('请输入正确的手机号'))
    }
    // 再次输入
    var checkOldPasswordInput = (rule, value, cd) => {
      if (this.userInfo.password == this.userInfo.oldPassword){
        return cd()
      }
      cd(new Error("旧密码不一致"))
    }
    return{
      dialogUserInfo: false,
      dialogPassword: false,
      isCollapse: false,
      formLabelWidth: '120px',
      role: false,
      userInfo: {
        modifyType: '',
        roleId: null,
        username: '',
        password: '',
        oldPassword: '',
        newPassword: '',
        gender: '',
        phoneNumber: ""
      },
      userInfoRules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
        oldPassword: [
          {required: true, message: '请输入旧密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'},
          { validator: checkOldPasswordInput }
          ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
          ],
        phoneNumber: [
          { required: true, message: '请输入手机号', trigger: 'blur' }, 
          { validator: checkPhoneNumber }
          ]
      },
    }
  },
  beforeCreate(){
    var token = localStorage.getItem("loginToken")
    this.$axios.get('/user/getUserInfo',{headers:{"token": token}})
    .then(res => {
      console.log(res)
      if(res.data.data != null){
        this.userInfo = res.data.data
      }
      if(this.userInfo.roleId != null){
        if(this.userInfo.roleId == 0 | this.userInfo.roleId == 1){
          this.role = true
          console.log(this.userInfo.roleId)
          console.log(this.role)
        }
      }
      // console.log(res)
    })
    .catch(err => {
      // console.error(err); 
    })
  },
  methods: {
    changeMenuCss(){
      if(this.isCollapse == false){
        this.isCollapse = true
      }else{
        this.isCollapse = false
      }
    },
    toRegister(){
      this.$router.push('/RegisterLogin')
    },
    open(key){
      console.log(key)
      if(key == "1-1-1"){
        this.$router.push("/HotBlindBox")
      }
      if(key == "1-1-2"){
        this.$router.push("/AllBlindBox")
      }
      if(key == "1-2-1"){
        this.$router.push("/HotDollBlindBox")
      }
      if(key == "3"){
        this.$router.push("/ShoppingCart")
      }
      if(key == "5"){
        this.$router.push("/AboutUs")
      }
      if(key == "4-1-2"){
        this.$router.push("/OnTheShelfBlindBox")
      }
      if(key == "4-1-3"){
        this.$router.push("/MerchantBlindBoxSaleInfo")
      }
      if(key == "6-1-1"){
        this.$router.push("/UserInfo")
      }
      if(key == "6-1-2"){
        this.$router.push("/UserWallet")
      }
    },
    loginOut(){
      var token = localStorage.getItem("loginToken")
      var that = this
      this.$axios.get('/user/loginOut',{headers:{"token": token}})
      .then(res=>{
        that.$message({
          showClose: true,
          message: "退出登陆成功",
          type: "success"
        })
        that.reload()
      })
    },
    modifyUserInfo(formName){
      var that = this;
      this.$refs[formName].validate((valid)=>{
        if(valid){
          var token = localStorage.getItem("loginToken")
          this.userInfo.modifyType = 2
          this.$axios.post('/user/modifyUserInfo',this.userInfo,{headers:{"token": token}})
          .then(res=>{
            that.$message({
              showClose: true,
              message: "修改信息成功",
              type: "success"
            })
            that.dialogUserInfo = false
            that.reload()
          })
        }else{
          this.$message({
            showClose: true,
            message: "请检查输入的信息是否符合规范",
            type: "warning"
          })
        }
      })
    },
    modifyUserPassword(formName){
      var that = this;
      this.$refs[formName].validate((valid)=>{
        if(valid){
          var token = localStorage.getItem("loginToken")
          this.userInfo.modifyType = 1
          this.$axios.post('/user/modifyUserInfo',this.userInfo,{headers:{"token": token}})
          .then(res=>{
            that.$message({
              showClose: true,
              message: "修改密码成功",
              type: "success"
            })
            that.dialogPassword = false
            that.reload()
          })
        }else{
          this.$message({
            showClose: true,
            message: "请检查输入的信息是否符合规范",
            type: "warning"
          })
        }
      })
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
    },
    toHomeAdmin(){
      this.$router.push("/HomeAdmin")
    }
  }
}
</script>

<style lang="less" scoped>
.title{
  position:relative;
  top: -20px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: auto;
  background-color: whitesmoke;
}
.menu_open{
  width: 200px;
  animation: change_menu_open 0.5s;
  background-color: rgba(0, 0, 0, 1 );
  overflow-y: hidden;
  overflow-x: hidden; 
  text-align: center;
  z-index: 2;
}
.menu_close{
  width: 64px;
  animation: change_menu_close 0.3s;
  background-color: rgba(0, 0, 0, 1 );
  overflow-y: hidden;
  overflow-x: hidden; 
  text-align: center;
  z-index: 2;
}
@keyframes change_menu_open{
  0%{width: 78px;}
  100%{width: 214px;}
}
@keyframes change_menu_close{
  0%{width: 214px;}
  100%{width: 78px;}
}
.el-main{
  background-color: whitesmoke;
}
</style>
